<template>
	<div class="app-container">
		<div class="sidebar" :class="{ 'collapsed': !isExpanded }" @mouseenter="expandSidebar"
			@mouseleave="collapseSidebar">
			<div class="sidebar-content">
				<h2 class="sidebar-title" v-show="isExpanded">
					任务管理系统
				</h2>
				<div class="nav-list">
					<div class="nav-group">
						<div class="nav-title" v-if="!isExpanded">···</div>
						<ul v-if="isExpanded">
							<li v-for="tab in tabs" :key="tab.id" :class="{ 'active': activeTab === tab.id }"
								@click="handleTabClick(tab)">
								<div class="nav-item-content">
									<div class="icon"><img :src="getTabImage(tab.id)" alt="图标"></div>
									<span :class="{ 'hidden': !isExpanded }">{{ tab.name }}</span>
								</div>
							</li>
						</ul>
					</div>

				</div>
			</div>
		</div>

		<!-- 主内容区 -->
		<div class="main-content">
			<!-- 根据currentComponent显示不同组件 -->
			<DynamicProcess v-if="currentComponent === 'DynamicProcess'" @switch-component="switchComponent" />

			<TaskDistribution v-else-if="currentComponent === 'TaskDistribution'"
				:item-data="currentItemData" @back="switchComponent('DynamicProcess')" />

		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
	} from 'vue'
	import DynamicProcess from './components/DynamicProcess.vue'
	import TaskDistribution from './components/TaskDistribution.vue'

	const isExpanded = ref(false);

	const tabs = [
		{
			id: 'task',
			name: '工作流',
			component: 'DynamicProcess'
		},
		{
			id: 'process',
			name: '任务监控',
			component: 'TaskDistribution'
		}
	];

	const activeTab = ref('task');
	const currentComponent = ref('DynamicProcess'); // 默认显示DynamicProcess组件


	const currentItemData = ref(null);

	// 修改点击事件处理，同时切换activeTab和currentComponent
	const handleTabClick = (tab) => {
		activeTab.value = tab.id;
		currentComponent.value = tab.component;
	};

	const switchComponent = (componentName, data) => {
		currentComponent.value = componentName;

		// 同步更新activeTab
		const matchingTab = tabs.find(tab => tab.component === componentName);
		if (matchingTab) {
			activeTab.value = matchingTab.id;
		}

		if (data && data.itemData) {
			console.log('data--app.config.globalProperties. = :', data)
			   		currentItemData.value = data.itemData;
  		}
	};


	const expandSidebar = () => {
		isExpanded.value = true;
	}

	const collapseSidebar = () => {
		isExpanded.value = false;
	}

	const getTabImage = (tabId) => {
		// 这里可以返回不同的图片路径
		const icons = {
			'task': '/src/assets/tasklist.png',
			'process': '/src/assets/liucheng.png'
		};

		return icons[tabId] || '/src/assets/tasklist.png';
	};
</script>

<style lang="scss" scoped>
	.app-container {

		display: flex;
		height: 100vh;
		width: 100vw;
		// background: linear-gradient(135deg, #0a0f2c, #1b1e2f);
		position: fixed;
		top: 0;
		left: 0;
		// background-color: #f0f2f5;

		.sidebar {
			background-color: #001529;
			color: white;
			transition: all 0.3s ease;
			width: 20vw;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1000;
			box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
			background-color: rgba(0, 21, 41, 0.5); // 添加透明度

			&.collapsed {
				width: 4.8vw; // 减小收缩时的宽度
				background-color: rgba(0, 21, 41, 0.95);

				.nav-title {
					writing-mode: vertical-lr;
					text-orientation: upright;
					height: auto;
					padding: 2.4vh 1.4vw; // 调整内边距使文字居中
					letter-spacing: 4px;
					font-size: 1.4vw;
					color: rgba(255, 255, 255, 0.65);
					text-align: center;
					margin: 0;
					position: absolute; // 使用绝对定位
					top: 50%; // 垂直居中
					left: 50%;
					transform: translate(-50%, -50%); // 精确居中
					white-space: nowrap; // 防止文字换行
				}

				.nav-list ul li {
					padding: 0;
					display: flex;
					justify-content: center;

					.nav-item-content {
						justify-content: center;
						padding: 0;

						.icon {
							margin-right: 0;
						}
					}
				}
			}

			.sidebar-content {
				height: 100%;
				display: flex;
				flex-direction: column;
				backdrop-filter: blur(8px);

				.sidebar-title {
					margin: 0;
					padding: 1.6vh;
					font-size: 1.8vw;
					font-weight: bold;
					height: 5.6vh;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);
					transition: none;
					opacity: 1;
				}

				.nav-list {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0;
					margin: 0;
					width: 100%;

					ul {
						list-style: none;
						padding: 1.6vh 0.8vw;
						margin: 0;
						width: 85%;

						li {
							height: 4.8vh;
							cursor: pointer;
							transition: all 0.3s;
							margin-bottom: 1.2vh;
							border-radius: 0.6vh;
							margin-left: 1vw;

							.nav-item-content {
								display: flex;
								align-items: center;
								height: 100%;
								padding: 0 1.6vw;

								.icon {
									display: flex;
									align-items: center;
									justify-content: center;
									margin-right: 1vw;
									margin-left: 0.4vw;

									img {
										width: 2vw;
										height: 2vw;
										filter: brightness(0) invert(0.7);
										margin-left: 0.5vw;
									}
								}

								span {
									font-size: 1.4vw;
									color: rgba(255, 255, 255, 0.85);
									font-weight: bold;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							&.active {
								background-color: #4096ff;

								.nav-item-content {
									.icon img {
										filter: brightness(0) invert(1);
									}

									span {
										color: #ffffff;
										font-weight: 500;
									}
								}
							}

							&:hover:not(.active) {
								background-color: rgba(255, 255, 255, 0.08);
							}
						}
					}
				}
			}
		}

		// 调整主内容区域的边距
		.main-content {
			flex: 1;
			margin-left: 4.8vw; // 对应收缩后的侧边栏宽度
			padding: 0 2.4vw;
			background: linear-gradient(
				to bottom,
				#001f3f 0%,    /* 深蓝 */
				#2e5fac 50%,   /* 中间过渡色 */
				#448cff 100%   /* 浅蓝 */
			);
				overflow-y: auto;
			transition: margin-left 0.3s ease;
		}
	}

	.hidden {
		display: none !important;
	}

	.sidebar.collapsed {
		.sidebar-title {
			opacity: 0;
			visibility: hidden;
			transition: none;
		}
	}
</style>